<template>
	<view class="verification-records-container">
		<!-- 蓝色头部搜索区域 -->
		<view class="blue-background"></view>
		
		<view class="search-header">
			<view class="search-bar">
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="输入需要搜索的内容" 
					type="text"
					@input="onSearchInput"
				/>
				<image src="/static/verificationrecords-img/搜索@3x.png" class="search-icon"></image>
			</view>
		</view>
		
		<!-- 核销记录列表 -->
		<view class="records-list">
			<view 
				class="record-card" 
				v-for="(record, index) in filteredRecords" 
				:key="index"
				
			>
				<view class="service-info">
					<text class="service-name">{{ record.serviceName }}</text>
				</view>
				<view class="order-user">
					<text class="label">下单用户:</text>
					<text class="value">{{ record.userName }}</text>
				</view>
				<view class="payment-amount">
					<text class="label">实付金额:</text>
					<text class="value amount">¥{{ record.actualAmount }}</text>
				</view>
				<view class="verification-time">
					<text class="time-text">核销时间:{{ record.verificationTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				records: [
					{
						serviceName: '普通洗车、机油、工时',
						userName: '张三',
						actualAmount: '32.00',
						verificationTime: '2022-10-12 11:09'
					},
					{
						serviceName: '普通洗车、机油、工时',
						userName: '张三',
						actualAmount: '32.00',
						verificationTime: '2022-10-12 11:09'
					},
					{
						serviceName: '普通洗车、机油、工时',
						userName: '张三',
						actualAmount: '32.00',
						verificationTime: '2022-10-12 11:09'
					},
					{
						serviceName: '汽车美容、基础保养',
						userName: '李四',
						actualAmount: '45.00',
						verificationTime: '2022-10-11 14:30'
					},
					{
						serviceName: '车辆维修-上门取车',
						userName: '王五',
						actualAmount: '120.00',
						verificationTime: '2022-10-10 09:15'
					}
				]
			}
		},
		computed: {
			// 过滤后的记录列表
			filteredRecords() {
				if (!this.searchKeyword.trim()) {
					return this.records
				}
				return this.records.filter(record => 
					record.serviceName.includes(this.searchKeyword) ||
					record.userName.includes(this.searchKeyword) ||
					record.actualAmount.includes(this.searchKeyword) ||
					record.verificationTime.includes(this.searchKeyword)
				)
			}
		},
		methods: {
			// 搜索输入处理
			onSearchInput() {
				// 实时搜索，computed会自动更新
			},
			
			
		}
	}
</script>

<style scoped>
	.verification-records-container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}
	
	/* 蓝色背景区域：固定定位，占页面高度的四分之一 */
	.blue-background {
		width: 100%;
		height: 25vh; /* 占视口高度的四分之一 */
		background-color: #007AFF;
		position: fixed;
		top: 88rpx; /* 导航栏高度 */
		left: 0;
		z-index: 0;
	}
	
	/* 蓝色头部搜索区域 */
	.search-header {
		width: 100%;
		position: fixed;
		top: 88rpx; /* 导航栏高度 */
		left: 0;
		z-index: 2;
		padding: 20rpx;
		padding-top: calc(env(safe-area-inset-top) + 20rpx); /* 状态栏 + 内边距 */
	}
	
	.search-bar {
		width: 86%;
		height: 80rpx;
		background-color: white;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
		border: none;
		outline: none;
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
	
	/* 核销记录列表 */
	.records-list {
		position: fixed;
		top: calc(208rpx + env(safe-area-inset-top)); /* 固定在搜索框下方 */
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		padding: 20rpx;
		overflow-y: auto;
	}
	
	.record-card {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.record-card:last-child {
		margin-bottom: 0;
	}
	
	/* 服务信息 */
	.service-info {
		margin-bottom: 20rpx;
	}
	
	.service-name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		line-height: 1.4;
	}
	
	/* 下单用户 */
	.order-user {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.value {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 实付金额 */
	.payment-amount {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.amount {
		font-weight: bold;
		color: #007AFF;
	}
	
	/* 核销时间 */
	.verification-time {
		margin-top: 10rpx;
	}
	
	.time-text {
		font-size: 24rpx;
		color: #999;
	}
</style>